<template>
  <el-container>
    <el-header>
      <!--导航-->
      <div style="float: left;">
        <!--写网站logo、标题等-->
        nf-press
      </div>
      <div style="float: right;min-width: 500px;">
        <!--网站导航-->
        <doc-navi></doc-navi>
      </div>
    </el-header>
    <el-container>
      <!--左侧边栏-->
      <el-aside width="330px">
        <!--菜单-->
        <doc-menu></doc-menu>
      </el-aside>
      <el-main>
        <!--文档区域-->
        <doc-main ></doc-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
  import { ElHeader, ElContainer ,ElAside, ElMain } from 'element-plus'
  import { docMenu, docNavi } from '/nf-press-view' // 菜单 导航
  import docMain from './views/main.vue' // 编辑区域

</script>

<style>
body {
  background-color:#ece5d9;
}
  .el-header {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    height: 80px;
    line-height: 30px;
    border: 1px solid #ccc!important;padding:14px;border-radius: 16px!important;
  }

  .el-aside {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    line-height: 30px;
    min-height: 500px;
    border:1px solid rgba(159, 196, 238, 0.315);
  }

  .el-main {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    line-height: 18px;
  }

  body > .el-container {
    margin-bottom: 10px;
  }

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 5px;
}
</style>
